import { defineStore } from 'pinia'
import ScrollTrigger from 'gsap/ScrollTrigger'
import Lenis from 'lenis'
import { gsap } from 'gsap'
import { debounce } from '@/utils'
import { useSystemStore } from '@/stores/system'

export type ScrollType = {
  scrollRef: HTMLElement
  lenis: any
  scrollTop: number
  isDown: boolean
  isTop: boolean
  isBottom: boolean
}

export const useScrollStore = defineStore('scroll', () => {
  const systemStore = useSystemStore()

  const scroll = ref<ScrollType>({
    // 滚动条实列
    scrollRef: document.body,
    // 相对视口距离
    scrollTop: 0,
    // 是否到达了顶部
    isTop: true,
    // 是否向下滚动
    isDown: false,
    // lenis 实例
    lenis: null,
    // 到达底部
    isBottom: false
  })

  let gaspFun: (time: number) => void
  const toggleScroll = (val: boolean) => {
    if (val) {
      if (!gaspFun) {
        gaspFun = (time: number) => {
          scroll.value.lenis?.raf(time * 1000)
        }
      }
      gsap.ticker.add(gaspFun)
    } else {
      if (gaspFun) {
        gsap.ticker.remove(gaspFun)
      }
    }
  }

  const initScroll = () => {
    const scrollWrapper = document.getElementById('scrollWrapper')
    const scrollContent = document.getElementById('scrollContent')

    if (
      !systemStore.system.isLt1024 &&
      systemStore.system.isOpenLenis &&
      scrollWrapper &&
      scrollContent
    ) {
      destroyLenis()
      scroll.value.lenis = new Lenis({
        wrapper: scrollWrapper,
        content: scrollContent,
        lerp: 0.05,
        autoResize: true,
        smoothWheel: true,
        wheelMultiplier: 0.3
      })
      scroll.value.lenis.on('scroll', (e: any) => {
        ScrollTrigger.update()
        scroll.value.isDown = e.direction > 0
        computerScroll(e.progress)
      })
      toggleScroll(true)
      gsap.ticker.lagSmoothing(0)
    } else if (systemStore.system.isLt1024 || !systemStore.system.isOpenLenis) {
      destroyLenis()
    }
    scroll.value.scrollRef = document.getElementById('scrollWrapper') || document.body
  }
  const destroyLenis = () => {
    if (scroll.value.lenis) {
      toggleScroll(false)
      scroll.value.lenis.destroy()
      scroll.value.lenis = null
    }
  }

  watch(
    () => systemStore.system.isOpenLenis,
    () => {
      initScroll()
    },
    {
      immediate: true,
      deep: true
    }
  )

  const oldProgress = ref<number>(0)
  const computerScroll = (progress: number) => {
    // 比例乘以窗口高度，得到飞机应该滑动距离
    scroll.value.scrollTop = progress * window.innerHeight
    // 跟新滚动条状态
    scroll.value.isTop = progress < 0.01
    scroll.value.isBottom = progress > 0.99
    scroll.value.isDown = oldProgress.value < progress
    oldProgress.value = progress
    debouncedRotate180()
  }

  // 滚动结束后使飞机向上
  const debouncedRotate180 = debounce(() => {
    if (scroll.value.isDown && scroll.value.scrollTop > 0) {
      scroll.value.isDown = false
    }
  }, 1000)

  const toTop = (top: number = 0) => {
    if (scroll.value.lenis) {
      scroll.value.lenis.scrollTo(top, { duration: 0.3, lerp: 0.1 })
    } else if (scroll.value.scrollRef) {
      scroll.value.scrollRef.scrollTo({ behavior: 'smooth', top: top })
    }
  }

  return {
    scroll,
    initScroll,
    computerScroll,
    toggleScroll,
    toTop
  }
})
